<template>
  <div v-if="showCamera">
    <div  class="cameraShadow" id="cameraShadow"></div>
    <dv-border-box-11 title="监控视频" class="cameraBg">
      <div ref="boxContent" class="boxContent">
        <div id="playWnd" class="playWnd"></div>
      </div>
			<el-tooltip
				class="box-item"
				effect="dark"
				content="关闭"
				placement="top-start"
			>
				<el-icon class="closeIcon" @click="closeWindow"><CircleClose /></el-icon>
			</el-tooltip>
    </dv-border-box-11>
  </div>
</template>
  

<script lang="ts">

import {
  defineComponent,
  ref,
  computed,
  reactive,
  onMounted,
  onUnmounted,
  watch,
} from "vue";
import { useStore } from "vuex";
import bus from '@/utils/bus'
import {JSEncrypt} from '@/assets/js/jsencrypt.min.js'
import {WebControl} from '@/assets/js/jsWebControl-1.0.0.min'

// 声明类型
const PropsType = {
  data: {
    type: Object,
    require: true,
  },
}

export default defineComponent({
  props: PropsType,
  components: {},
  setup(props) {
    const datavColors = computed(() => useStore().state.datavColors);
    const oWebControl = ref(null);
    const initCount = ref(0);
    const windowW = ref(1000);
    const windowH = ref(600);
    const pubKey = ref(null);
    const nowMode = ref(0);
    const showCamera = ref(false);
    const boxContent = ref(null);
		const hasInit = ref(false)
    const cameraCode = ref(null)

		const playCamera = (data:any) => {
      showCamera.value = true
      cameraCode.value = data.code
      if(hasInit.value == true){
        play(data.code)
      }else{
        initPlugin(data.code)
      }
    }

		// 启用监听
    bus.on('playCamera', playCamera);

		
    // 监听
    watch(
      () => props.data,
      (val: any) => {
        console.log(val);
      }
    );

    onMounted(() => {
			// var app = document.getElementById("cameraShadow");
			// app.addEventListener("click", function (event) {
			// 	var e = event || window.event;
			// 	if (e.cancelBubble) {
			// 		// hiddenWindow();
			// 		e.cancelBubble = true; //ie 阻止事件冒泡
			// 		e.stopPropagation(); // 其余浏览器 阻止事件冒泡
			// 		return;
			// 	} else {
			// 		// hiddenWindow();
			// 		e.stopPropagation(); // 其余浏览器 阻止事件冒泡
			// 		return;
			// 	}
			// });
      window.addEventListener("resize", () => {
        if(showCamera.value){
          setTimeout(() => {
            resize();
          }, 50);
        }
      });
    });

    onUnmounted(() => {
			bus.off('playCamera', playCamera);
      window.removeEventListener("resize", () => {
        setTimeout(() => {
          resize();
        }, 50);
      });
			if (oWebControl.value != null) {
				oWebControl.value.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
				oWebControl.value.JS_Disconnect().then(
					
				);
			}
    });

    //methods
    const initPlugin = (code) => {
      oWebControl.value = new WebControl({
        szPluginContainer: "playWnd", // 指定容器id
        iServicePortStart: 15900, // 指定起止端口号，建议使用该值
        iServicePortEnd: 15909,
        szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
        cbConnectSuccess: function () {
          // 创建WebControl实例成功
          oWebControl.value
            .JS_StartService("window", {
              // WebControl实例创建成功后需要启动服务
              dllPath: "./VideoPluginConnect.dll", // 值"./VideoPluginConnect.dll"写死
            })
            .then(
              function () {
                // 启动插件服务成功
                oWebControl.value.JS_SetWindowControlCallback({
                  // 设置消息回调
                  cbIntegrationCallBack: cbIntegrationCallBack,
                });

                oWebControl.value
                  .JS_CreateWnd("playWnd", windowW.value, windowH.value)
                  .then(function () {
                    //JS_CreateWnd创建视频播放窗口，宽高可设定
                    init(code); // 创建播放实例成功后初始化
                  });
              },
              function () {
                // 启动插件服务失败
              }
            );
        },
        cbConnectError: function () {
          // 创建WebControl实例失败
          oWebControl.value = null;
          $("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
          /*eslint no-undef: "error"*/
          WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
          initCount.value++;
          if (initCount.value < 3) {
            setTimeout(function () {
              initPlugin(cameraCode.value);
            }, 3000);
          } else {
            // $("#playWnd").html("插件启动失败，请检查插件是否安装！");
            openUpload()
          }
        },
        cbConnectClose: function (bNormalClose) {
          // 异常断开：bNormalClose = false
          // JS_Disconnect正常断开：bNormalClose = true
          console.log("异常断开");
          oWebControl.value = null;
        },
      });
    };

    const init = (code) => {
      getPubKey(function () {
        ////////////////////////////////// 请自行修改以下变量值	////////////////////////////////////
        var appkey = "28228500"; //综合安防管理平台提供的appkey，必填
        var secret = setEncrypt("8wCpQUJ9RZuWEaJVyqU8"); //综合安防管理平台提供的secret，必填
        var ip = "192.168.110.1"; //综合安防管理平台IP地址，必填
        var playMode = nowMode.value; //初始播放模式：0-预览，1-回放
        var port = 1443; //综合安防管理平台端口，若启用HTTPS协议，默认443
        var snapDir = "D:\\SnapDir"; //抓图存储路径
        var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
        var layout = "1x1"; //playMode指定模式的布局
        var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
        var encryptedFields = "secret"; //加密字段，默认加密领域为secret
        var showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
        var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
        var buttonIDs =
          "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
        // var toolBarButtonIDs = "2048,2049,2050,2304,2306,2305,2307,2308,2309,4096,4608,4097,4099,4098,4609,4100"
        ////////////////////////////////// 请自行修改以上变量值	////////////////////////////////////
        oWebControl.value
          .JS_RequestInterface({
            funcName: "init",
            argument: JSON.stringify({
              appkey: appkey, //API网关提供的appkey
              secret: secret, //API网关提供的secret
              ip: ip, //API网关IP地址
              playMode: playMode, //播放模式（决定显示预览还是回放界面）
              port: port, //端口
              snapDir: snapDir, //抓图存储路径
              videoDir: videoDir, //紧急录像或录像剪辑存储路径
              layout: layout, //布局
              enableHTTPS: enableHTTPS, //是否启用HTTPS协议
              encryptedFields: encryptedFields, //加密字段
              showToolbar: showToolbar, //是否显示工具栏
              showSmart: showSmart, //是否显示智能信息
              buttonIDs: buttonIDs, //自定义工具条按钮
              reconnectTimes: 3, //重连次数
              reconnectDuration: 1, //重连时间间隔（单位秒）
              // toolBarButtonIDs: toolBarButtonIDs
            }),
          })
          .then(function (oData) {
						console.log("插件初始化成功");
						hasInit.value = true
            resize(); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
            oWebControl.value.JS_ShowWnd();
						play(code)
          });
      });
    };

    const play = (code) => {
      var cameraIndexCode = code; //获取输入的监控点编号值，必填
      var streamMode = 0; //主子码流标识：0-主码流，1-子码流
      var transMode = 1; //传输协议：0-UDP，1-TCP
      var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
      cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
      oWebControl.value
        .JS_RequestInterface({
          funcName: "startPreview",
          argument: JSON.stringify({
            cameraIndexCode: cameraIndexCode, //监控点编号
            streamMode: streamMode, //主子码流标识
            transMode: transMode, //传输协议
            gpuMode: gpuMode, //是否开启GPU硬解
            wndId: -1, //-1 或未指定-空闲窗口预览（不管成功与失败，预览后会自动跳到下一个空闲窗口） 0-选中窗口预览（预览后不会自动跳到下一个空闲窗口） 大于 0为由 wndId 指定的窗口上播放
          }),
        })
        .then(function (oData) {
          resize()
          oWebControl.value.JS_ShowWnd();
        });
    };

		const hiddenWindow = () =>{
			oWebControl.value.JS_HideWnd();
      showCamera.value = false;
		}

		const closeWindow = () => {
			oWebControl.value.JS_RequestInterface({
					funcName: "stopAllPreview"
			});
			hiddenWindow()
		}

    const resize = () => {
      let width = null;
      let height = null;
      // * 需保持的比例（默认1.77778）
      const baseProportion = parseFloat((1920 / 1080).toFixed(5));
      // 当前宽高比
      const currentRate = parseFloat(
        (window.innerWidth / window.innerHeight).toFixed(5)
      );
      if (currentRate > baseProportion) {
        // 表示更宽
        width = ((window.innerHeight * baseProportion) / 1920).toFixed(5);
        height = (window.innerHeight / 1080).toFixed(5);
      } else {
        // 表示更高
        height = (window.innerWidth / baseProportion / 1080).toFixed(5);
        width = (window.innerWidth / 1920).toFixed(5);
      }
      if (oWebControl.value != null) {
        oWebControl.value.JS_Resize(
          width * boxContent.value.offsetWidth,
          height * boxContent.value.offsetHeight
        );
        setWndCover();
      }
    };

    // 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
    const setWndCover = () => {
      //获取web页面的尺寸
      var iWidth = $(window).width();
      var iHeight = $(window).height();
      //获取播放窗口div元素的左边界、右边界距离web页面左边界的长度、上边界、下边界距离web页面上边界的长度
      var oDivRect = $("#playWnd").get(0).getBoundingClientRect();
      //Math.round 为四舍五入    Math.abs 为取绝对值
      var iCoverLeft = oDivRect.left < 0 ? Math.abs(oDivRect.left) : 0;
      var iCoverTop = oDivRect.top < 0 ? Math.abs(oDivRect.top) : 0;
      var iCoverRight =
        oDivRect.right - iWidth > 0 ? Math.round(oDivRect.right - iWidth) : 0;
      var iCoverBottom =
        oDivRect.bottom - iHeight > 0
          ? Math.round(oDivRect.bottom - iHeight)
          : 0;

      iCoverLeft = iCoverLeft > 800 ? 800 : iCoverLeft;
      iCoverTop = iCoverTop > 400 ? 400 : iCoverTop;
      iCoverRight = iCoverRight > 800 ? 800 : iCoverRight;
      iCoverBottom = iCoverBottom > 400 ? 400 : iCoverBottom;

      oWebControl.value.JS_RepairPartWindow(0, 0, 801, 400); // 多1个像素点防止还原后边界缺失一个像素条
      //抠除左边界
      if (iCoverLeft != 0) {
        oWebControl.value.JS_CuttingPartWindow(0, 0, iCoverLeft, 401);
      }
      //抠除上边界
      if (iCoverTop != 0) {
        oWebControl.value.JS_CuttingPartWindow(0, 0, 801, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
      }
      //抠除右边界
      if (iCoverRight != 0) {
        oWebControl.value.JS_CuttingPartWindow(
          801 - iCoverRight,
          0,
          iCoverRight,
          401
        );
      }
      //抠除下边界
      if (iCoverBottom != 0) {
        oWebControl.value.JS_CuttingPartWindow(
          0,
          401 - iCoverBottom,
          801,
          iCoverBottom
        );
      }
    };

    //获取公钥
    const getPubKey = (callback) => {
      oWebControl.value
        .JS_RequestInterface({
          funcName: "getRSAPubKey",
          argument: JSON.stringify({
            keyLength: 1024,
          }),
        })
        .then(function (oData) {
          console.log(oData);
          if (oData.responseMsg.data) {
            pubKey.value = oData.responseMsg.data;
            callback();
          }
        });
    };

    //RSA加密
    const setEncrypt = (value) => {
      var encrypt = new JSEncrypt();
      encrypt.setPublicKey(pubKey.value);
      return encrypt.encrypt(value);
    };

    const cbIntegrationCallBack = (oData) => {
			if(oData.responseMsg.type == 2 && oData.responseMsg.msg.result == '816'){
				closeWindow()
			}
      //关闭窗口回调事件
      // if(oData.responseMsg.type == 2 && oData.responseMsg.msg.result == '816' && this.changing == false){
      //   this.cameraArr.forEach((item,index)=>{
      //     if(item.cameraCode == oData.responseMsg.msg.cameraIndexCode){
      //       this.cameraArr.splice(index,1)
      //       if(this.cameraArr.length == 0)
      //         this.closeWindow(false)
      //       else
      //         this.$emit("resetIcon", oData.responseMsg.msg.cameraIndexCode);
      //     }
      //   })
      //   this.displayed.forEach((item2,index2)=>{
      //     if(item2 == oData.responseMsg.msg.cameraIndexCode){
      //       this.displayed.splice(index2,1)
      //     }
      //   })
      // }
    };

    const openUpload = () =>{
      window.location.href ="http://192.168.81.3:9000/bsc/host/document-other/VideoWebPlugin.exe";
    }

    return {
      datavColors,
      oWebControl,
      initCount,
      showCamera,
			hasInit,
      boxContent,
      initPlugin,
      cbIntegrationCallBack,
      resize,
      setWndCover,
      setEncrypt,
      getPubKey,
			closeWindow,
			hiddenWindow,
      openUpload
    };
  },
});
</script>
  
  <style lang="scss" scoped>
@import "@/assets/scss/index.scss";
$px: 20px;
.cameraShadow {
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  z-index: 900000;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.cameraBg {
  position: fixed;
  z-index: 900002;
  left: 50%;
  top: calc(50vh + #{$px});
  transform: translate(-50%, -50%);
  padding: 60px 20px 20px 20px;
  width: 1200px;
  height: 780px;
  .boxContent {
    width: 100%;
    height: 100%;
  }
	.closeIcon{
		position: absolute;
		top: 0px;
		right: 0px;
		top: -50px;
    right: -50px;
    font-size: 30px;
		cursor: pointer;
	}
}
</style>
  